<template>
  <el-form ref="ruleForm" :model="addForm" :rules="typeRules" label-width="120px">
    <el-form-item label="分类" prop="achievementType">
      <el-select v-model="addForm.achievementType" placeholder="请选择分类">
        <el-option v-for="(item,index) in tableData" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input v-model="addForm.title" />
    </el-form-item>
    <el-form-item label="专家">
      <el-input v-model="addForm.expert" />
    </el-form-item>
    <el-form-item label="专利名称">
      <el-input v-model="addForm.patentName" />
    </el-form-item>
    <el-form-item label="专利号">
      <el-input v-model="addForm.patentNumber" />
    </el-form-item>
    <el-form-item label="所属单位">
      <el-input v-model="addForm.patentCompany" />
    </el-form-item>
    <el-form-item label="封面">
      <el-upload
        class="avatar-uploader"
        :action="action"
        :headers="myHeaders"
        :show-file-list="false"
        :on-success="(res)=>{handleAvatarSuccess(res,'cover')}"
      >
        <img v-if="addForm.cover" :src="addForm.cover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <el-input v-model="addForm.cover" style="margin-top:20px;" placeholder="请输入图片地址" />
      <span class="tips">请上传图片或输入图片地址，建议尺寸：500*700px</span>
    </el-form-item>
    <el-form-item label="详情">
      <tinymce ref="tinymceContent" v-model="addForm.patentContent" :height="400" />
    </el-form-item>
    <el-form-item label="附件">
      <el-upload
        class="avatar-uploader"
        :action="action"
        :headers="myHeaders"
        :show-file-list="false"
        :on-success="(res)=>{handleAvatarSuccess(res,'enclosure')}"
      >
        <div v-if="addForm.enclosure"> {{ addForm.enclosure }}</div>
        <i v-else class="el-icon-upload avatar-uploader-icon" />
      </el-upload>
      <el-input v-model="addForm.enclosure" style="margin-top:20px;" placeholder="请输入附件地址" />
      <span class="tips">请上传附件或输入附件地址</span>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="addForm.phone" />
    </el-form-item>
    <el-form-item label="联系人">
      <el-input v-model="addForm.contact" />
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="addForm.email" />
    </el-form-item>
    <el-form-item label="申请人">
      <el-input v-model="addForm.applicant" />
    </el-form-item>
    <el-form-item label="申请号">
      <el-input v-model="addForm.applyNumber" />
    </el-form-item>
    <el-form-item label="申请日">
      <el-date-picker
        v-model="addForm.applyDate"
        type="datetime"
        placeholder="选择日期时间"
      />
    </el-form-item>
    <el-form-item label="专利类型">
      <el-input v-model="addForm.patentType" />
    </el-form-item>
    <el-form-item label="申请人地址">
      <el-input v-model="addForm.applicantAddress" />
    </el-form-item>
    <el-form-item label="发明人">
      <el-input v-model="addForm.inventor" />
    </el-form-item>
    <el-form-item label="单位地址">
      <el-input v-model="addForm.organizationAddress" />
    </el-form-item>
    <el-form-item label="合作方式">
      <el-input v-model="addForm.cooperationMode" />
    </el-form-item>
    <el-form-item label="成果阶段">
      <el-input v-model="addForm.achivementPhase" />
    </el-form-item>
    <el-form-item label="转化条件">
      <el-input v-model="addForm.convertCondition" />
    </el-form-item>
    <el-form-item label="成果估值">
      <el-input v-model="addForm.achievementValuation" />
    </el-form-item>
    <el-form-item label="成果完成单位">
      <el-input v-model="addForm.completedBy" />
    </el-form-item>
    <el-form-item label="主要完成人">
      <el-input v-model="addForm.principalPerson" />
    </el-form-item>
    <el-form-item label="届数">
      <el-input v-model="addForm.version" type="number" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addForm_enter('ruleForm')">保存</el-button>
      <el-button @click="close()">关闭</el-button>
    </el-form-item>
  </el-form>

</template>
<script>
import Tinymce from '@/components/Tinymce'
import { uploadUrl, token } from '@/utils/request'
import {
  achievementsTypeList,
  achievementsAdd,
  achievementsDetail
} from '@/api/achievements'
export default {
  components: { Tinymce },
  data () {
    return {
      action: uploadUrl,
      myHeaders: {
        'Authorization-admin': token
      },
      formInline: {
        name: '', // 搜索字段
        page: '1', // 当前页
        pageSize: '1000' // 每页记录数
      },
      tableData: [],
      addForm: {},
      typeRules: {
        achievementType: [
          { required: true, message: '请选择分类', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        phone: [
          { required: false, pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请选择正确的手机格式', trigger: 'blur' }
        ],
        email: [
          { required: false, pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
        ]
      },
      typeState: true
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    // 图片上传回调
    handleAvatarSuccess (response, key) {
      const { url } = response.data
      this.addForm[key] = url
      this.$forceUpdate()
    },
    // 确认新增课程
    addForm_enter (ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          if (this.typeState) {
            console.log(this.addForm)
            achievementsAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.$router.go(-1)
              }
              // this.getAll(this.formInline)
              // this.addFormDialog = false
            })
          } else {
            achievementsAdd(this.addForm).then(res => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$router.go(-1)
              }
              // this.getAll(this.formInline)
              // this.addFormDialog = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close () {
      this.$router.go(-1)
    },
    // 初始化查询所有数据
    async getAll (formInline) {
      const res = await achievementsTypeList(formInline)
      this.tableData = res.data.list
      const id = this.$route.query.id
      if (id) {
        const detail = await achievementsDetail({ id: id })
        this.addForm = detail.data
        this.typeState = false
      }
    }
  }
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: auto;
    display: block;
  }
</style>
